<template>
    <div>
        <div class="x-content" 
            v-for="(v,index) in listData" 
            :key="index" >
            <!-- 标题部分 -->
            <div class="x-content-top padding25 x-bottom-border">
                <div class="x-select-title" @click="selectAll(v)">
                    <text class="x-select-no iconfont" v-if="!v.selectall">&#xe674;</text>
                    <text class="x-select-xz iconfont" v-if="v.selectall">&#xe673;</text>
                </div>
                <text class="x-flex1 x-title">{{v.store_name}}</text>
            </div> 
                <!-- 尺寸等信息 -->
            <swipecell @actionClick="actionClick(v.store_id,detail.barcode)" 
                v-for="(detail,i) in v.goods" :key="i">
                <div slot="content">
                <!-- 商品详细 -->
                <div class="x-content-center padding25">
                    <image class="x-image" :src="detail.thumb"></image>
                    <div class="x-shop-div">
                        <div class="x-shop-start">
                            <text class="x-shop-title">{{detail.name}}</text>
                        </div>
                    </div>
                </div>
                 <div class="x-detail" >
                    <div class="x-select" @click="selectCheckBox(detail,i)">
                        <text class="x-select-no iconfont" v-if="!detail.select">&#xe674;</text>
                        <text class="x-select-xz iconfont" v-if="detail.select">&#xe673;</text>
                    </div>
                    <div class="x-detail-div padding-bttom">
                        <text class="x-detail-label">尺寸</text>
                        <text class="x-select-item">{{getDetail(detail.detail,'size')}}</text>
                    </div>
                    <div class="x-detail-div padding-bttom">
                        <text class="x-detail-label">颜色</text>
                        <text class="x-detail-text">{{getDetail(detail.detail,'color')}}</text>
                    </div>
                    <div class="x-detail-div padding-bttom">
                        <text class="x-detail-label">单位</text>
                        <text class="x-detail-text">套</text>
                    </div>
                    <div class="x-detail-div">
                        <text class="x-detail-price">{{getShopPrice(detail.price)}}</text>
                        <x-stepper :defaultValue="detail.number" 
                            @stepperValueChanged="stepperValueChanged($event,v.store_id,detail.barcode)"></x-stepper>
                    </div>
                </div>
              </div>
            </swipecell>
        </div>
    </div>
</template>
<script>
import asCore from "../../../common/js/core";
export default {
    props: {
      listData: {
        type: Array,
        default: () => ([])
      }
    },
    components: {
        "x-stepper": require("../../../common/component/stepper.vue"),
        "swipecell": require("../../../common/component/swipecell.vue")
    },
    data(){
        return {
            
        }
    },
    methods:{
       /**获取商品名称 */
       getShopName(data){
           if(data.length>0){
               return data[0]['Name'];
           }
       },
       /**获取价格 */
       getShopPrice(price){
           return "¥" + (price.toFixed(2));
       },
       /**获取详细 */
       getDetail(data,type){
           var specs = data['specs'];
           if(type=="size"){
              return this.getSpecs(specs,"尺寸");
           }else if(type=="color"){
              return this.getSpecs(specs,"品名");
           }
       },
       getSpecs(specs,type){
           if(specs && specs.length>0){
               for(var i=0;i<specs.length;i++){
                   if(specs[i]['name']==type){
                       return specs[i]['value']?specs[i]['value']:"无";
                   } 
               }
           }else{
               return "无";
           }
       },
       selectCheckBox(detail,index){
           //asCore.alert(JSON.stringify(detail));
           if(detail.select) {
               detail.select = false;
            } else {
                detail.select = true;
            }
       },
       /**选中所有和取消选中所有 */
       selectAll(data){
           if(data.selectall){
               data.selectall = false;
               this.selectAllShop(data,false);
           }else{
               data.selectall = true;
               this.selectAllShop(data,true);
           }
       },
       selectAllShop(data,boolean){
           for(var i=0;i<data['goods'].length;i++){
               data['goods'][i].select = boolean;
           }
       },
       /**增加数量 */
       stepperValueChanged(value,storeid,barcode){
           var num = value.value;
           var param = {
               store_id:storeid,
               barcode:barcode,
               number:num,
           };
           //asCore.alert(JSON.stringify(param));
           asCore.post("/member/cart/inc",param,(data,msg,flag)=>{
               /**无返回值 */
               if(!flag){
                   if(msg){
                       asCore.toast(msg);
                   }
               }
          });
       },
       actionClick(storeid,barcode){
           var param = {
               store_id:storeid,
               barcode:barcode
           };
           asCore.post("/member/cart/delete",param,(data,msg,flag)=>{
               /**无返回值 */
          });
       }
    }
}
</script>
<style scoped>
.iconfont{
    font-family: iconfont;
}
.x-content-top {
    height:95px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}
.x-title {
    color: #151517;
    font-size:32px;
}
.x-flex1{
    flex: 1;
}
.padding25{
    padding-left: 25px;
    padding-right: 25px;
}
.padding-bttom {
    padding-bottom: 15px;
}
.x-bottom-border {
    border-bottom-color: #dfdfdf;
    border-bottom-width: 1px;
}
.padding-bottom5 {
    padding-bottom: 5px;
}
.x-content {
    margin-top: 20px;
}
.x-content-center {
    flex-direction: row;
    padding-top:20px;
    background-color: #fff;
}
.x-image {
    height: 150px;
    width: 160px;
}
.x-shop-div {
    flex: 1;
    position: relative;
    height: 150px;
}
.x-shop-start {
    padding-left: 15px;
}
.x-shop-title {
    color: #151517;
    font-size:30px;
}
.x-detail {
    padding-top: 25px;
    padding-left: 80px;
    padding-right: 25px;
    padding-bottom: 25px;
    background-color: #fff;
}
.x-detail-div {
    position: relative;
    flex-direction: row;
    align-items: center;
}
.x-detail-label {
    color: #686868;
    font-size: 28px;
    margin-right:30px;
}
.x-select-item {
  height: 60px;
  line-height: 60px;
  padding-left:25px;
  padding-right: 25px;
  border-color: #b7b6bc;
  border-width: 1px;
  border-radius: 10px;
  text-align: center;
  font-size: 28px;
  color: #1f1e24;
}
.x-detail-text {
    color: #1e1d23;
    font-size:28px;
}
.x-detail-price {
    color: #b00829;
    font-size:32px;
    flex: 1;
}
.x-select {
    position: absolute;
    left: 0;
    top:0;
    padding-left: 25px;
    padding-top:32px;
    padding-right: 20px;
    padding-bottom: 25px;
}
.x-select-title {
    top:2px;
    width: 52px;
}
.x-select-xz {
    font-size:41px;
    left: 2;
    top:2;
    color: #AF0A2A;
}
.x-select-no {
    font-size:43px;
    color: #C5C5C5;
}
</style>

